<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <title>乐优商城--我的收藏</title>

    <link rel="stylesheet" type="text/css" href="css/webbase.css"/>
    <link rel="stylesheet" type="text/css" href="css/pages-cart.css"/>
</head>

<body>

<div id="cartApp">

    <div class="top">
        <shortcut/>
    </div>

    <div class="cart py-container">

        <!--logoArea-->
        <div class="logoArea">
            <div class="fl logo"><span class="title">我的收藏</span></div>
        </div>

        <!--All goods-->
        <div class="allgoods">
            <h4>全部商品<span>{{carts.length}}</span></h4>
            <div class="cart-main">
                <div class="yui3-g cart-th">
                    <!--$event代表当前全选框对象-->
                    <div class="yui3-u-1-4"><input type="checkbox" v-model="selectAll" @click="checkAll($event)"/> 全部
                    </div>
                    <div class="yui3-u-1-4">商品</div>
                    <div class="yui3-u-1-4">单价（元）</div>
                    <div class="yui3-u-1-4">操作</div>
                </div>
                <div class="cart-item-list">

                    <div class="cart-body">
                        <div class="cart-list">
                            <ul class="goods-list yui3-g" v-for="(cart,i) in carts" :key="i">
                                <li class="yui3-u-1-24">
                                    <input type="checkbox" v-model="selected" :value="cart"/>
                                </li>
                                <li class="yui3-u-11-24">
                                    <div class="good-item">
                                        <div class="item-img"><img :src="cart.image" width="80px" height="80px"/></div>
                                        <div class="item-msg">
												<span style="line-height:70px ">
													{{cart.title}}
												</span>
                                            <br/>
                                            <!--将私有属性解析出来 需要解析两次-->
                                            <span v-for="(v,k) in JSON.parse(JSON.parse(cart.ownSpec))" :key="k">
                                                          {{v}}
                                                </span>
                                        </div>
                                    </div>
                                </li>

                                <li class="yui3-u-1-4">
                                    <span style="line-height:70px" class="price">
                                        <!--通过判断新的商品价格是否变化，来添加删除线-->
                                        <span v-if="cart.price!=cart.newPrice">
                                             <s>{{ly.formatPrice(cart.price)}}</s>
                                        </span>
                                        <span v-else>
                                            {{ly.formatPrice(cart.price)}}
                                        </span>
                                    </span>
                                    <div v-show="cart.price!=cart.newPrice">
                                        <!--通过判断价格的变化，来决定显示“涨价”或“降价”-->
                                        <span>商品已<span v-text="cart.price>cart.newPrice?'降价':'涨价'"></span>,现价为：</span>
                                        <span style="color: red">{{ly.formatPrice(cart.newPrice)}}</span>
                                    </div>
                                    <!--用这种遍历的方式，也能判断-->
                                    <!--<div v-for="(flag,j) in flags" :key="j" >-->
                                        <!--<span v-if="flag == cart.title">-->
                                            <!--<i v-show="show">该商品已下架，请勿拍！</i>-->
                                        <!--</span>-->
                                    <!--</div>-->

                                    <!--数组有个indexOf方法，可以判定某个元素是否再数组内-->
                                    <div v-for="flags.indexOf(cart.title)" v-show="show">
                                            该商品已下架，请勿拍！</i>
                                    </div>
                                </li>

                                <li class="yui3-u-1-4">
                                    <br/>
                                    <a href="#none" @click="addCart(cart)">加入购物车</a>
                                    <br/>
                                    <br/>
                                    <a href="#none" @click="delCollect(cart)">删除</a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

            <div class="cart-tool">
                <div class="select-all">
                    <input type="checkbox" name="" id="" value="" v-model="selectAll" @click="checkAll($event)"/>
                    <span>全选</span>
                </div>
                <div class="option">
                    <a href="#none" @click="delAll">删除选中的商品</a>
                    <a href="#none" @click="addAll">加入我的购物车</a>
                </div>
            </div>

            <div class="liked">
                <ul class="sui-nav nav-tabs">
                    <li class="active">
                        <a href="#index" data-toggle="tab">猜你喜欢</a>
                    </li>
                    <li>
                        <a href="#profile" data-toggle="tab">特惠换购</a>
                    </li>
                </ul>
                <div class="clearfix"></div>
                <div class="tab-content">
                    <div id="index" class="tab-pane active">
                        <div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
                            <div class="carousel-inner">
                                <div class="active item">
                                    <ul>
                                        <li>
                                            <img src="img/like1.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="img/like2.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="img/like3.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="img/like4.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="item">
                                    <ul>
                                        <li>
                                            <img src="img/like1.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="img/like2.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="img/like3.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <img src="img/like4.png"/>
                                            <div class="intro">
                                                <i>Apple苹果iPhone 6s (A1699)</i>
                                            </div>
                                            <div class="money">
                                                <span>$29.00</span>
                                            </div>
                                            <div class="incar">
                                                <a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
                                                        class="car"></i><span class="cartxt">加入购物车</span></a>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
                            <a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
                        </div>
                    </div>
                    <div id="profile" class="tab-pane">
                        <p>特惠选购</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
    var cartVm = new Vue({
        el: "#cartApp",
        data: {
            ly,
            carts: [], //我的收藏中的数据
            selected: [],//被选中的商品
            selectAll: false,//是否被全选
            show: false,//控制显示下架信息是否显示
            flags: [],//下架商品的标记
        },
        //钩子函数，页面加载时就执行
        created() {

            //页面加载的时候就把购物车中的数据展示出来
            this.loadCarts();

        },
        methods: {
            //加载商品信息
            loadCarts() {
                //先判断登录状态
                ly.verifyUser()
                    .then(() => {
                        //用户登录状态，从redis中查询我的收藏信息
                        ly.http.get("/cart/collect")
                            .then((resp) => {
                                this.carts = resp.data;
                                //下面是查询新的价格，以便比对价格变化
                                const skuTitles = resp.data.map(sku => sku.title);
                                ly.http.post("item/sku/newList", skuTitles)
                                    .then(({data}) => {
                                        this.carts.forEach(cart => {
                                            data.forEach(newCart => {
                                                if (cart.title === newCart.title) {
                                                    //通过Vue的set方法，可以给对象动态新增属性
                                                    Vue.set(cart, 'newPrice', newCart.price);
                                                }
                                            })
                                        })
                                    });
                                //下面是查询商品上下架状态，单独列出
                                ly.http.post("item/spu/oldSpu", skuTitles)
                                    .then(({data}) => {
                                        for (let i = 0; i < this.carts.length; i++) {
                                            for (let j = 0; j < data.length; j++) {
                                                if (data[j][this.carts[i].title] === false) {
                                                    //当对应spu为下架状态时，提示用户
                                                    this.show = true;
                                                    this.flags.push(this.carts[i].title);//记录为下架状态的商品名称
                                                }
                                            }
                                        }
                                    });

                                this.selectAll = true;
                                this.selected = this.carts;
                                ly.store.set("cartslength", this.carts.length)
                            });
                    })
                    .catch(() => {
                        window.location = "/login.html?returnUrl=" + window.location;
                    })
            },

            //将收藏的数据加入购物车
            addCart(cart) {
                ly.verifyUser()
                    .then(() => {
                        //已经登录，则发送数据到后台
                        ly.http.post("/cart", new Array(cart))
                            .then(() => {
                                //添加成功后，先删除收藏中的数据
                                this.delCollect(cart);
                            }).catch(() => {
                            alert("添加购物车失败，请重试！")
                        })
                    })

            },

            //删除商品
            delCollect(cart) {
                ly.verifyUser()
                    .then(() => {

                        // 已登录
                        ly.http.delete("/cart/collect/" + cart.skuId)
                            .then(() => {
                                //定义一个carts的索引,来存储与当前cart相同的索引
                                let cartIndex = -1;
                                for (let i = 0; i < this.carts.length; i++) {
                                    if (cart.skuId === this.carts[i].skuId) {
                                        cartIndex = i;
                                        break;
                                    }
                                }
                                //从carts中删除当前cart
                                this.carts.splice(cartIndex, 1);
                            })
                    })

            },

            addAll() {
                const collects = this.selected;
                collects.forEach(collect => {
                    this.addCart(collect);
                })

            },

            delAll() {
                const collects = this.selected;
                collects.forEach(collect => {
                    this.delCollect(collect);
                })
            },


            // 勾选全选按钮时，实现全选或者全不选商品
            checkAll(e) {
                // e 是代表“全选按钮”的对象
                if (e.target.checked) {
                    this.selected = this.carts;
                } else {
                    this.selected = [];
                }
            }
        },
        //使用watch函数来实现 当商品全部被手动选择后，全选按钮的勾选实现
        watch: {
            selected: {
                deep: true,
                handler() {
                    if (this.carts.length == this.selected.length) {
                        this.selectAll = true;
                    } else {
                        this.selectAll = false;
                    }
                }
            }
        },

        components: {
            shortcut: () => import("/js/pages/shortcut.js")
        }

    });
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>

</body>

</html>